<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
	import { ref } from 'vue'
	import type { DepartData } from '@/types/consult.d.ts'
	import { getdepartmentApi } from '../../apis/consult'
	//科室列表
	const departList = ref([] as DepartData[])
	//当前高亮的下标
	const activeIndex = ref(0)
	//点击切换下标
	const changeIndex = (i: number) => {
		// console.log(index)
		activeIndex.value = i
	}
	//获取一级科室列表
	const getDepartList = async () => {
		const res = await getdepartmentApi()
		departList.value = res
	}
	//接收url中的参数
	const props = defineProps<{ type: string; illnessType: string }>()

	getDepartList()
</script>

<template>
	<view class="department-page">
		<scroll-view scroll-y class="department-primary">
			<view
				v-for="(item, index) in departList"
				@tap="changeIndex(index)"
				:class="{ active: index === activeIndex }"
				class="department-item"
				>{{ item.name }}</view
			>
			<!-- <view class="department-item">外科</view> -->
			<!-- <view class="department-item">坤科</view> -->
		</scroll-view>
		<scroll-view class="department-secondary">
			<navigator
				v-for="item in departList[activeIndex]?.child"
				:key="item.id"
				hover-class="none"
				:url="`/subpkg_consult/description/index?type=${type}&illnessType=${illnessType}&depId=${item.id}`"
				class="department-item"
			>
				{{ item.name }}
			</navigator>
		</scroll-view>
	</view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
